/**
 * 粉丝圈
 */

import React, { Component } from 'react';
import { Progress, Icon, Button, message, Input, Modal, Row, Col, Tag } from 'antd';
import { getUrlParams } from 'yl-util';
import { api } from '../../constants';
import { fetch } from '../../utils';
import './style.scss';

let openId = '';
const urlParams = getUrlParams(window.location.href.split('?')[1]);
if (urlParams && urlParams.id) {
  openId = window.btoa(window.btoa(`${urlParams.id}yqcmxssLcJL1l8jnlC`));
}
// const openId = 'TWpJME9USXdPSGx4WTIxNGMzTk1ZMHBNTVd3NGFtNXNRdz09';

export default class Index extends Component {
  state = {
    fandomPostList: [],
    fandomName: '',
    page: 1,
  }

  componentDidMount() {
    this.getFandomPostList();
  }

  getFandomPostList = async (page = 1) => {
    const response = await fetch(`${api.fandomPostList}/${openId}?page=${page}`);
    console.log('resposne: ', response);
    if (response && response.msgCode === 'S0000') {
      const { fandomPostData = [], fandomName = '' } = response.data || {};
      let { fandomPostList } = this.state;
      if (page !== 1) {
        fandomPostList = [...fandomPostList, ...fandomPostData];
      } else {
        fandomPostList = fandomPostData;
      }
      this.setState({
        fandomPostList,
        fandomName,
        page,
      });
    }
  }

  report = async (msg) => {
    if (!msg) {
      message.error('请输入内容再发表！');
      return;
    }
    const params = {
      openId,
      postContent: msg,
      fpId: '0',
      imageSum: 0,
    };
    const response = await fetch(api.fandomPost, {
      method: 'POST',
      body: params,
    });

    if (response.msgCode === 'S0000') {
      message.success(response.data || '发表成功');
    } else {
      message.error(response.message || '接口返回异常');
    }
  }

  like = async (fpId) => {
    const params = {
      openId,
      fpId,
    };
    const response = await fetch(api.fandomLikes, {
      method: 'POST',
      body: params,
    });

    if (response.msgCode === 'S0000') {
      message.success(response.data ? (response.data.msg + response.data.flId) : '点赞失败');
    } else {
      message.error(response.message || '接口返回异常');
    }
  }

  comment = async (fpId, commentContent) => {
    const params = {
      openId,
      fpId,
      commentContent,
    };
    const response = await fetch(api.fandomComment, {
      method: 'POST',
      body: params,
    });

    if (response.msgCode === 'S0000') {
      message.success(response.data ? (response.data.msg || '发表成功') : '发表成功');
    } else {
      message.error(response.message || '接口返回异常');
    }
  }

  render() {
    const { fandomName, fandomPostList, page } = this.state;
    console.log('fandomPostList', fandomPostList);
    return (
      <div className="index">
        <br />
        <div className="p">
          发表粉丝圈：
          <Input.Search
            className="bless-search"
            placeholder="输入要发表的内容"
            enterButton="发表"
            onSearch={this.report}
          />
        </div>
        <h3>
          {fandomName}
        </h3>
        <div className="p">
          {fandomPostList.map(({ fp_id, u_username, image_sum, post_content, image = '[]', isLike }) => (
            <div className="comment-item">
              <div><strong>{u_username}：</strong>{post_content}</div>
              {/* <div className="image-list">
                {
                  image_sum > 0 &&
                  JSON.parse(image).map((url) => (
                    <img src={url} alt="" />
                  ))
                }
              </div> */}
              <div>
                <Button type="primary" onClick={this.like.bind(null, fp_id)} disabled={isLike !== 0}>点赞</Button>
                <Input.Search
                  className="bless-search"
                  placeholder="输入要评论的内容"
                  enterButton="评论"
                  onSearch={this.comment.bind(null, fp_id)}
                />
              </div>
            </div>
          ))}
        </div>
        <Button onClick={() => { this.getFandomPostList(page + 1); }} type="primary">第二页</Button>
      </div>
    );
  }
}
